<template>
  <div class="user-bg">
    <div class="user-sand"></div>
    <div class="user-heistar"></div>
    <div class="user-star1"></div>
    <div class="user-star2"></div>
    <div class="trainstar">
      <div class="user-star3"></div>
      <div class="user-train"></div>
    </div>
    <div class="user-character"></div>
    <!--
      <div class="user-smallstar1"></div>
      <div class="user-smallstar2"></div>
      <div class="user-smallstar3"></div>
     -->
    <blink-star
      :stars="[
        { left: '2.5rem', top: '0.8rem', type: '--yellow-square' },
        { left: '4.5rem', top: '0.5rem', type: '--cyan' },
        { left: '3.5rem', top: '2.5rem', type: '--yellow-bling' },
      ]"
    />
    <shooting-star />
    <arrows-icon v-if="isPlayAnimation" class="arrows-icon" />
    <div class="text">
      <div
        v-if="isNewUser"
        :class="[
          'isyeareventtext',
          `isyeareventtext1`,
          { textAnimation: isPlayAnimation },
        ]"
      >
        很高兴能遇见你
      </div>
      <div
        :class="['texteventcontainer', { textAnimationevent: isPlayAnimation }]"
      >
        <div
          v-for="(item, index) in userinfolist"
          :key="index"
          :class="[
            'isyeareventtext',
            `isyeareventtext${Number(index) + 1}`,
            { textAnimation: isPlayAnimation },
          ]"
        >
          <span style="font-size: 0.4rem; color: #ffc811; font-weight: 600">{{
            item[0]
          }}</span>
          <br>
          {{ item[1] }}
        </div>
      </div>

      <div :class="['isusereventtext', { textAnimation: isPlayAnimation }]">
        <div :class="['special', { textAnimation: isPlayAnimation }]">
          <span style="font-size: 20px; color: #ffc811; font-weight: 400">{{
            userinfo.register_time
          }}</span>
          <span>是特别的一天</span>
        </div>
        <br>
        <div :class="['isusernum', { textAnimation: isPlayAnimation }]">
          <span>那天你来到了嘿嘿，是第
            <span style="font-size: 20px; color: #ffc811; font-weight: 400">{{
              userinfo.user_id
            }}</span>
            个用户</span>
        </div>
        <br>
        <div :class="['isuserdays', { textAnimation: isPlayAnimation }]">
          <span>你已经陪伴嘿嘿走过了
            <span style="font-size: 20px; color: #ffc811; font-weight: 400">{{
              userinfo.days_with_hehe
            }}</span>
            天</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useLoginStore } from '@/lib/js/hooks'
import { createLogin } from '@/lib/components/Login'
export default {
  props: {
    isPlayAnimation: {
      type: Boolean,
      default: false
    }
  },
  emits: ['travel-info-inited'],
  setup () {
    const loginStore = useLoginStore()
    const isInHeyHey = window.isHeyHeyTalk()
    return {
      loginStore,
      isInHeyHey
    }
  },
  data () {
    return {
      userinfo: {
        hey_id: '',
        user_id: '',
        nick_name: '',
        icon: '',
        register_time: '',
        days_with_hehe: ''
      },
      userinfolist: [],
      isNewUser: false
    }
  },
  computed: {},
  watch: {

  },
  watch: {
    'loginStore.isInitial': {
      handler (value) {
        this.$nextTick(() => {
          if (value) {
            if (this.loginStore.isLogin) {
              this.getUserInfo()
            } else {
              if(window.isHeyHeyTalk()){
                createLogin(() => {
                  this.loginStore.isLogin = true
                  this.getUserInfo()
                })
              }else{
                if(/\/main/.test(window.location.href)){
                  this.$toast.fail('请重新登录')
                  setTimeout(() => {
                    window.location.href = `${window.location.origin}${window.location.pathname}`
                  }, 500)
                  return
                }else{
                  createLogin(() => {
                    this.loginStore.isLogin = true
                    this.getUserInfo()
                  })
                }
              }
            }
          }
        })
      },
      immediate: true
    }
  },
  created () {
    //this.getUserInfo();

  },
  methods: {
    async getUserInfo () {
      const res = await this.$api.Info.getUserInfo()
      let intimacyRes = {}
      try{
        intimacyRes = await this.$api.Info.getImtimacyList()
      }catch(e){

      }
      const { result: { user_info: userinfo, is_new_user, user_info: { hey_id:heyId, nick_name: nickName } }, result } = res
      const { result: { user_info: { big_event: userinfolist }, wish_is_Chosen: wishIsChosen } } = res
      this.userinfo = {
        ...userinfo
      }
      this.userinfolist = {
        ...userinfolist
      }

      this.isNewUser = is_new_user
      this.$emit('travel-info-inited', {
        ...result,
        ...intimacyRes.result
      })
      localStorage.setItem('currentUserHeyId', heyId)
      localStorage.setItem('currentUserNickName', nickName)
      localStorage.setItem('wishIsChosen', wishIsChosen)
    }
  }
}


</script>

<style lang="scss" scoped>
body .arrows-icon{
  animation-delay: 11.5s;
}
.user-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("./images/B_bg.jpg") no-repeat;
  background-size: 100% auto;
  background-position: 0 100%;
  overflow: hidden;
}

.user-sand {
  position: absolute;
  width: 1.76rem;
  height: 2.5rem;
  background-image: url("./images/B_sand.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: sand 6s infinite;
  @keyframes sand {
    0% {
      top: 0%;
    }
    50% {
      top: -3%;
    }
    100% {
      top: 0;
    }
  }
}
.user-heistar {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 2.36rem;
  height: 1.5rem;
  background-image: url("./images/B_heistar.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: heistar 6s infinite;
  @keyframes heistar {
    50% {
      top: 13%;
    }
    100% {
      top: 10%;
    }
  }
}
.user-star1 {
  position: absolute;
  top: 35%;
  right: 0;
  width: 0.99rem;
  height: 1.09rem;
  background-image: url("./images/B_star1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 6s infinite;
  @keyframes star1 {
    50% {
      top: 30%;
    }
    100% {
      top: 35%;
    }
  }
}
.user-star2 {
  position: absolute;
  top: 68%;
  left: 0;
  width: 0.8rem;
  height: 1.56rem;
  background-image: url("./images/B_star2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star2 6s infinite;
  @keyframes star2 {
    50% {
      top: 71%;
    }
    100% {
      top: 68%;
    }
  }
}
.trainstar {
  position: absolute;
  top: 78%;
  right: -55.5%;
  width: 100%;
  height: 100%;
  .user-star3 {
    position: absolute;
    width: 7.48rem;
    height: 7.51rem;
    background-repeat: no-repeat;
    background-image: url("./images/B_star3.png");
    background-size: 100% 100%;
    margin-top: 0.4rem;
    animation: star3 6s linear infinite;
    @keyframes star3 {
      0% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(90deg);
      }
      50% {
        transform: rotate(180deg);
      }
      75% {
        transform: rotate(270deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  }
  .user-train {
    position: absolute;
    width: 1.9rem;
    height: 1.24rem;
    margin-left: 1.5rem;
    background-image: url("./images/B_train.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
}
.user-character {
  position: absolute;
  top: 60%;
  right: 10%;
  width: 5.59rem;
  height: 5.25rem;
  background-image: url("./images/B_character.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: character 4s infinite;
  @keyframes character {
    50% {
      top: 55%;
    }
    100% {
      top: 60%;
    }
  }
}

.user-smallstar1 {
  position: absolute;
  top: 3%;
  right: 50%;
  width: 0.31rem;
  height: 0.44rem;
  background-image: url("./images/B_smallstar1.png");
  background-size: 100% 100%;
  animation: smallstart 3s infinite;
}
.user-smallstar2 {
  position: absolute;
  top: 5%;
  right: 30%;
  width: 0.21rem;
  height: 0.38rem;
  background-image: url("./images/B_smallstar2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: smallstart 3s infinite;
}
.user-smallstar3 {
  position: absolute;
  top: 18%;
  right: 38%;
  width: 0.23rem;
  height: 0.34rem;
  background-image: url("./images/B_smallstar3.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: smallstart 3s infinite;
}
@keyframes smallstart {
  0%,
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}
.text {
  position: absolute;
  top: 6%;
  left: 12%;
  width: 6.17rem;
  height: 4.79rem;
  font-size: 0.32rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  .texteventcontainer {
    animation-delay: 6s;
    position: absolute;
    top: 70%;
    .isyeareventtext {
      margin-bottom: 0.25rem;
    }
    .isyeareventtext1 {
      width: 100%;
      animation-delay: 0;
      animation-fill-mode: forwards;
      transform: translateX(-4.4rem);
    }
    .isyeareventtext2 {
      width: 100%;
      animation-delay: 1.5s;
      animation-fill-mode: forwards;
      transform: translateX(-7rem);
    }

    .isyeareventtext3 {
      width: 100%;
      animation-delay: 3s;
      animation-fill-mode: forwards;
      transform: translateX(-7rem);
    }
  }

  .isusereventtext {
    margin-top: -1rem;
    width: 100%;
    position: absolute;
    top: 90%;
    .special {
      animation-delay: 7s;
      animation-fill-mode: forwards;
      transform: translateX(-7rem);
    }
    .isusernum {
      animation-delay: 8.5s;
      animation-fill-mode: forwards;
      transform: translateX(-7rem);
    }
    .isuserdays {
      animation-delay: 10s;
      animation-fill-mode: forwards;
      transform: translateX(-7rem);
    }
  }

  .textAnimation {
    animation-name: fadeInLeft;
    animation-duration: 1s;
  }
  .textAnimationevent {
    animation-name: fadeInLeftdisappear;
    animation-duration: 3000s;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2.2rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInLeftdisappear {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  0.2% {
    opacity: 0;
    transform: translateX(0rem);
  }
  100% {
    opacity: 0;
    transform: translateX(0rem);
  }
}

// @keyframes fadeInTop {
//   0% {
//     opacity: 0;
//   }
//   11% {
//     opacity: 0;
//   }
//   22% {
//     opacity: 0;
//   }
//   33% {
//     opacity: 0;
//   }
//   44% {
//     opacity: 0;
//   }
//   55% {
//     opacity: 0;
//   }
//   66% {
//     opacity: 0;
//   }
//   77% {
//     opacity: 0;
//   }
//   88% {
//     opacity: 0;
//   }
//   100% {
//     opacity: 1;
//   }
// }
</style>
